<template>
  <div>
    <div class="opt-area-02">
      <div class="left-con">
        <div class="input-frame" style="width: 164px">
          <Input v-model="params.name" style="width: 164px" placeholder="咨询人姓名" ></Input>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input v-model="params.cardno" style="width: 164px" placeholder="咨询人身份证号" ></Input>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input v-model="params.mobile" style="width: 164px" placeholder="咨询人联系电话" ></Input>
        </div>
        <div class="input-frame" style="width: 164px">
          <Button type="primary" style="margin-right: 5px" @click="addConsulting" >新增</Button>
          <Button type="primary" style="margin-right: 5px" @click="init">查询</Button>
        </div>
      </div>
    </div>
    <vxe-table
      align="center"
      :data="tableData">
      <vxe-table-column field="name" title="咨询人姓名"></vxe-table-column>
      <vxe-table-column field="mobile" title="咨询人联系电话"></vxe-table-column>
      <vxe-table-column field="cardno" title="咨询人身份证号"></vxe-table-column>
      <vxe-table-column field="problem" title="咨询问题"></vxe-table-column>
      <vxe-table-column field="answer" title="咨询答复"></vxe-table-column>
      <vxe-table-column field="consultation_time" title="咨询时间"></vxe-table-column>
      <vxe-table-column width="140" title="操作">
        <template v-slot="{ row }">
          <Button type="primary" @click="editConsulting(row)" >编辑</Button>
          <Button style="margin-left: 2%" type="error" @click="deleteConsulting(row)" >删除</Button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Modal v-model="modal.show" :title="modal.title" width="400">
      <Form :label-width="100">
        <FormItem label="咨询人姓名" >
          <Input v-model="modal.data.name" placeholder="请输入咨询人姓名"></Input>
        </FormItem>
        <FormItem label="咨询人联系电话" >
          <Input v-model="modal.data.mobile" placeholder="请输入咨询人联系电话"></Input>
        </FormItem>
        <FormItem label="咨询人身份证号">
          <Input v-model="modal.data.cardno" placeholder="请输入咨询人身份证号"></Input>
        </FormItem>
        <FormItem label="咨询问题">
          <Input type="textarea" v-model="modal.data.problem" placeholder="请输入咨询问题"></Input>
        </FormItem>
        <FormItem label="咨询答复">
          <Input type="textarea" v-model="modal.data.answer" placeholder="请输入咨询答复"></Input>
        </FormItem>
        <FormItem label="咨询时间">
          <DatePicker type="date" v-model="modal.data.consultation_time" placeholder="请输入咨询时间" style="width: 100%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="warning" @click="modal.show= false">取消</Button>
        <Button type="info" @click="confirm(modal.type)">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getConsultingPageList, insertConsulting, updateConsulting, deleteConsulting, date2str } from '@/api/eventlist'
// import SelectInfo from '../../grid-sw/components/select-info'

export default {
  data () {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableData: [],
      modal: {
        title: '',
        type: '',
        show: false,
        data: {}
      }
    }
  },
  methods: {
    init () {
      getConsultingPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData = ret.data.data.results
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    async insertConsulting () {
      await insertConsulting(this.modal.data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功！', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    async updateConsulting () {
     await updateConsulting(this.modal.data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功！', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    async confirm (type) {
      if (this.modal.data.consultation_time) {
        this.modal.data.consultation_time = date2str(this.modal.data.consultation_time)
      }
      switch (type) {
        case '1' :
          await this.insertConsulting();
          break;
        case '2' :
          await this.updateConsulting();
          break;
      }
      this.modal.show = false
      this.init()
    },
    addConsulting() {
      this.modal.title = '记录咨询'
      this.modal.show = true
      this.modal.type = '1'
      this.modal.data = {}
    },
    editConsulting(row) {
      this.modal.title = '修改咨询'
      this.modal.show = true
      this.modal.type = '2'
      this.modal.data = row
    },
    async deleteConsulting(row) {
      await deleteConsulting(row).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功！', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
      this.init()
    },
    pageAction (page) {
      this.params.pageNo = page
    },
    pageSizeChange (e) {
      this.params.pageSize = e
    }
  },
  mounted () {
    this.init()
    this.severUserInfo = this.$store.state.user.severUserInfo
  }
}
</script>

<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.page_style {
  margin: 60px 20px;
}
</style>
